<template>
	<view>
		<view class="cards">
			<view class="card" @click="cardClick('/pages/goods/price')">
				<view class="card-text">
					<view class="card-icon">
						<image src="../../../static/images/jiagehangqing.png" mode=""></image>
					</view>
					<view class="text">
						价格行情
					</view>
				</view>
				<view class="card-bg">
					<image src="../../../static/images/wave.png" mode=""></image>
				</view>
			</view>
			<view class="card-line">
				
			</view>
			<view class="card" @click="cardClick('/pages/goods/list')">
				<view class="card-text">
					<view class="card-icon">
						<image src="../../../static/images/chanpinzhanshi.png" mode=""></image>
					</view>
					<view class="text">
						产品展示
					</view>
				</view>
				<view class="card-bg">
					<image src="../../../static/images/wave.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			
		}
	},
	mounted() {
		
	},
	methods: {
		cardClick(url) {
			uni.navigateTo({
				url: url
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.cards{
		overflow: hidden;
		margin: 20rpx 22rpx;
		display: block;
		view{
			display: block;
		}
	}
	.card-line{
		width: 22rpx;
		float: left;
		height: 194rpx;
	}
	
	.card {
		float: left;
		width: 343rpx;
		align-items: center;
		border-radius: 20rpx;
		position: relative;
		background-image: url(/static/images/wave.png);
		background-size: cover;
		background-position: 0% 0%;
		background-color: rgb(244, 170, 109);
		height: 194rpx;
		// line-height: 194rpx;
		text-align: center;
		.card-text {
			color: #fff;
			.text:first-letter {
				// font-size: 36rpx;
				// margin-right: 4rpx;
				// font-weight: 500;
			}
			.text {
				color: #fff;
				margin-bottom: 6rpx;
				font-size: 28rpx;
				margin-top: 2rpx;
			}
		}
		.card-icon{
			width: 70rpx;
			height: 70rpx;
			display: inline-block;
			margin-top: 42rpx;
		}
		.card-bg{
			position: absolute;
			height: 194rpx;
			img{
				width: 100%;
				height: 100%;
			}
		}
	}
	.card:nth-child(1){
		background-color: rgb(236, 95, 138);
	}
	.card:after {
		content: "";
		position: absolute;
		background-color: inherit;
		width: 100%;
		height: 100%;
		left: 0;
		bottom: -10%;
		border-radius: 10rpx;
		opacity: 0.2;
		transform: scale(0.9, 0.9);
	}
</style>
